{%- liquid
  assign show_padding = true
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.header_color
  when 'white'
    assign header_color = 'text-white'
    assign richtext_link_style = 'richtext-link-light'
    case section.settings.button_style
      when 'solid'
        assign button_style = 'btn-light'
      when 'outline'
        assign button_style = 'btn-outline-light'
      when "link"
        assign button_style = 'btn-link link-light'
    endcase
  else
    assign header_color = ''
    assign richtext_link_style = 'richtext-link-default'
    case section.settings.button_style
      when 'solid'
        assign button_style = 'btn-primary'
      when 'outline'
        assign button_style = 'btn-outline-primary'
      when "link"
        assign button_style = 'btn-link link-primary'
    endcase
  endcase

  case section.settings.heading_alignment
    when 'left'
      assign heading_alignment = 'text-start'
      assign heading_position = 'justify-content-md-start'
    when 'center'
      assign heading_alignment = 'text-center'
      assign heading_position = 'justify-content-md-center'
    when "right"
      assign heading_alignment = 'text-end'
      assign heading_position = 'justify-content-md-end'
  endcase

  case section.settings.image_height
    when 'large'
      assign image_height = 'h-6'
    when 'medium'
      assign image_height = 'h-5'
    when 'small'
      assign image_height = 'h-4'
       when 'none'
      assign image_height = 'h-auto'
  endcase

  case section.settings.button_position
      when 'top'
        assign button_position = 'order-0'
      when 'bottom'
        assign button_position = 'order-2'
    endcase


    assign mark = 'h2'
    if section.settings.enable_adjust_h_tag
      assign mark = section.settings.adjust_h_tag_to
    endif

%}

<link rel="stylesheet" href="{{ 'featured-grid-index.min.css' | asset_url }}">
{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- assign  padding_top = section.settings.padding_top | append:'px' -%}
{%- assign  padding_bottom = section.settings.padding_bottom | append:'px' -%}

{%- assign padding_mobile_top = section.settings.padding_top_mob | append: 'px' -%}
{%- assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px' -%}

{%- style -%}
{{ section_identifier }} .section-container {
    padding-top: {{ padding_top }};
    padding-bottom: {{ padding_bottom }};
  }

 @media only screen and (max-width: 430px) {
    {{ section_identifier }} .section-container {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
  }
{%- if section.settings.enable_grid -%}
 {{ section_identifier }}   .featured-grid .grid-item {
    padding: 48px 32px;
  }

  {{ section_identifier }} .featured-grid-card-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-right: calc(var(--se-gutter-x) * 0.2);
      margin-left: calc(var(--se-gutter-x) * 0.2);
  }
  {{ section_identifier }} .featured-grid .grid-item {
    width: 100%;
    margin: 0;
  }
    .card-grid-text-content h3 {
        padding-bottom: 16px;
        font-size: 32px;
        font-weight: 700;
    }
    .featured-grid-card-container .grid-item {
        margin-top: 0;
        padding: 48px 32px;
    }
    .icon_container {
    display: flex;
    align-items: center;
    margin-right: 24px;
   }
    .icon_container picture.icon-wrapper img {
    width: 72px;
    height: 72px;
    object-fit: cover;
}
  @media only screen and (max-width: 430px){
      .card-grid-text-content h3  {
        font-size: 24px;
      }
    .icon_container picture.icon-wrapper img {
        width: 56px;
        height: 56px;
    }
     .icon_container {
        margin-right: 16px;
    }
  }
  {% if section.settings.enable_swipe_on_mobile == true %}
        @media only screen and (max-width: 767px) {
          {{ section_identifier }} .featured-grid-card-container {
            display: flex;
            gap: 10px;
          }
           {{ section_identifier }} .featured-grid-card-container .grid-item {
                padding: 24px 32px;
            }
        }

        {% else %}
   @media only screen and (max-width: 430px) {
    
      {{ section_identifier }} .featured-grid-card-container {
        grid-template-columns: 1fr;
        gap: 10px;
      }
       {{ section_identifier }} .featured-grid-card-container .grid-item {
        padding: 24px 32px;
      }
    }
     {% endif %}


{%- endif -%}

  {% if section.settings.enable_swipe_on_mobile == true %}
    .as-featured-grid-inner {
      overflow: hidden;
    }
    .as-featured-grid-inner.swiper:not(.not-initialized) {
      overflow: visible;
    }
  {% endif %}
{%- endstyle -%}
<div class="section-container {{ background_color }}">
  <input class="as-featured-grid-script" type="hidden" value="{{ 'featured-grid.min.js' | asset_url }}" {% if request.design_mode %}data-design-mode="yes"{% endif %}>
  <div class="container {{ heading_alignment }} {{ header_color }}">
    {%- if section.settings.heading != blank or section.settings.text != blank -%}
      <div class="row {{ heading_position }}">
        <div class="col-12 {{ section.settings.text_width }}">
          {%- if section.settings.heading != blank -%}
            <{{ mark }} class="mb-0 section-title">{{ section.settings.heading }}</{{ mark }}>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="no-last-margin mt-2 richtext-with-link {{ richtext_link_style }}">
              {{ section.settings.text }}
            </div>
          {%- endif -%}
        </div>
        
      </div>
    {%- endif -%}
  </div>
  <div class="d-flex flex-wrap">
    <div class="col-12 {{ button_position }} {{ heading_alignment }}">
      <div class="container">
        {% if section.settings.button_label != blank %}
          {%- if section.settings.button_link != blank -%}
            <a {% render 'link', link: section.settings.button_link %} href="{{ section.settings.button_link }}" class="btn {{ button_style }}{% if section.settings.button_position == 'top' %} mt-4{% else %} mt-5 mt-md-6{% endif %}">
              {{ section.settings.button_label }}
            </a>
          {%- else -%}
            <div class="btn {{ button_style }}{% if section.settings.button_position == 'top' %} mt-4{% else %} mt-5 mt-md-6{% endif %} disabled cursor-default">
              {{ section.settings.button_label }}
            </div>
          {%- endif -%}
        {% endif %}
      </div>
    </div>

    <div class="mt-5 mt-md-6 col-12 order-1">
      <div class="container{% if section.settings.enable_swipe_on_mobile == true %} as-featured-grid-container overflow-hidden featured-grid-padding featured-grid-padding{% endif %}">
        <div class="as-featured-grid-inner {% if section.settings.enable_swipe_on_mobile == true %}swiper as-swiper not-initialized overflow-visible{% endif %}">
          <div class="featured-grid-card-container row text-start flex-md-wrap{% if section.settings.enable_swipe_on_mobile == true %} swiper-wrapper flex-nowrap{% endif %}">
            {% for block in section.blocks %}
              {% if block.type == 'twoPerRow' %}
                
                {%- liquid
                  case block.settings.desktop_layout
                    when 'half_width_block'
                      assign desktop_layout_left = 'col-md-6 col-12'
                      assign desktop_layout_right = 'col-md-6 col-12'
                    when 'left_large_block'
                      assign desktop_layout_left = 'col-md-8 col-12'
                      assign desktop_layout_right = 'col-md-4 col-12'
                    when 'right_large_block'
                      assign desktop_layout_left = 'col-md-4 col-12'
                      assign desktop_layout_right = 'col-md-8 col-12'
                      when 'left_right_eqqual'
                       assign desktop_layout_left = 'col-md-12 col-12'
                      assign desktop_layout_right = 'col-md-12 col-12'
                  endcase
                %}
                <div class="{{ desktop_layout_left }} rounded-8 grid-item position-relative{% if section.settings.enable_swipe_on_mobile == true %} swiper-slide as-swiper-slide{% if forloop.last %} last-swiper-slide{% endif %}{% endif %}" style="background-color: {{ section.settings.background_color }};">
                  {% render 'text-shadow', id: block.id, ammount: block.settings.text_shadow_ammount_card_a, type: '-card-a' %}
                  {% render 'image-overlay-opacity', id: block.id, ammount: block.settings.image_overlay_opacity_card_a, type: '-card-a' %}
                  {%- liquid
                    case block.settings.text_color_card_a
                      when 'white'
                        assign text_color = 'text-white'
                      else
                        assign text_color = ''
                    endcase
                  -%}
                  
                  <div class="absolute-center">
                    <div class="img-wrapper{% if block.settings.mobile_image_card_a != blank or block.settings.desktop_image_card_a != blank %} h-100{% endif %} rigid-wrapper rounded-2">
                      {% if block.settings.mobile_image_card_a != blank %}
                        <picture class="d-md-none d-block w-100 h-100">
                          {% if block.settings.mobile_image_card_a != blank %}
                            {%- assign img_sizes = '(min-width: 1968px) 960px, (min-width: 600px) 50vw, calc(100vw - 32px)' -%}
                            {{ block.settings.mobile_image_card_a.src | image_url: width: block.settings.mobile_image_card_a.width | image_tag: loading: "lazy", class: "object-fit-cover", sizes: img_sizes }}
                          {% else %}
                            <div class="img-placeholder h-100 w-100">
                              {{ 'collection-6' | placeholder_svg_tag: 'w-100 h-100' }}
                            </div>
                          {% endif %}
                        </picture>
                      {% endif %}
                      {% if block.settings.desktop_image_card_a != blank %}
                        <picture class="d-none d-md-block w-100 h-100">
                          {% if block.settings.desktop_image_card_a != blank %}
                            {%- assign img_sizes = '(min-width: 1968px) 960px, (min-width: 600px) 50vw, calc(100vw - 32px)' -%}
                            {{ block.settings.desktop_image_card_a.src | image_url: width: block.settings.desktop_image_card_a.width | image_tag: loading: "lazy", class: "object-fit-cover", sizes: img_sizes }}
                          {% else %}
                            <div class="img-placeholder h-100 w-100">
                              {{ 'collection-6' | placeholder_svg_tag: 'w-100 h-100' }}
                            </div>
                          {% endif %}
                        </picture>
                      {% endif %}
                    </div>
                  </div>

                  <div class="absolute-center bg-black hero-image-overlay-opacity-{{ block.id }}{{ '-card-a' }} rounded-2"></div>

                  <div class="{{ image_height }} {% if block.settings.mobile_image_card_a != blank or block.settings.desktop_image_card_a != blank%}h-100{% else %}{% endif %} position-relative card-grid-text-content">
                    <div class="hero-text-shadow-overlay-{{ block.id }}{{ '-card-a' }} {{ text_color }}">
                      <div class="d-flex col-12 {{ block.settings.text_width_card_a }}">
                        {% if block.settings.icon_card_a != blank %}
                          <div class="icon_container">
                            <picture class="icon-wrapper d-flex justify-content-center align-items-center">
                              {% if block.settings.icon_card_a != blank %}
                                {%- assign img_sizes = '(min-width: 1968px) 960px, (min-width: 600px) 50vw, calc(100vw - 32px)' -%}
                                {{ block.settings.icon_card_a.src | image_url: width: block.settings.icon_card_a.width | image_tag: loading: "lazy", class: "object-fit-cover", sizes: img_sizes }}
                              {% else %}
                                <div class="img-placeholder h-100 w-100">
                                  {{ 'collection-6' | placeholder_svg_tag: 'w-100 h-100' }}
                                </div>
                              {% endif %}
                            </picture>
                          </div>
                        {% endif %}
                        <div class="text-content-wrapper">
                          {% if block.settings.overline_card_a != blank %}
                            <p class="mt-2 mb-0">
                              {{block.settings.overline_card_a}}
                            </p>
                          {% endif %}
                          {% if block.settings.heading_card_a != blank %}
                            <h3 class="mb-0">{{ block.settings.heading_card_a }}</h3>
                          {% endif %}
                          {% if block.settings.description_card_a != blank %}
                            <div class="no-last-margin richtext-with-link {{ richtext_link_style }}">
                              {{block.settings.description_card_a }}
                            </div>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  {% if block.settings.link_card_a %}
                    <a {% if block.settings.link_card_a contains 'https://' %}
                      target="_blank" rel="nofollow"
                    {% endif %}  href="{{ block.settings.link_card_a }}" class="stretched-link"></a>
                  {% endif %}
                </div>

                <div class="{{ desktop_layout_right }} rounded-8 grid-item position-relative{% if section.settings.enable_swipe_on_mobile == true %} swiper-slide as-swiper-slide{% if forloop.last %} last-swiper-slide{% endif %}{% endif %}" style="background-color: {{ section.settings.background_color }};">
                  {% render 'text-shadow', id: block.id, ammount: block.settings.text_shadow_ammount_card_b, type: '-card-b' %}
                  {% render 'image-overlay-opacity', id: block.id, ammount: block.settings.image_overlay_opacity_card_b, type: '-card-b' %}
                  {%- liquid
                    case block.settings.text_color_card_b
                      when 'white'
                        assign text_color = 'text-white'
                      else
                        assign text_color = ''
                    endcase
                  -%}
                  
                  <div class="absolute-center">
                    <div class="img-wrapper{% if block.settings.mobile_image_card_b != blank or block.settings.desktop_image_card_b != blank %} h-100{% endif %} rigid-wrapper rounded-2">
                      {% if block.settings.mobile_image_card_b != blank %}
                        <picture class="d-md-none d-block w-100 h-100">
                          {% if block.settings.mobile_image_card_b != blank %}
                            {%- assign img_sizes = '(min-width: 1968px) 960px, (min-width: 600px) 50vw, calc(100vw - 32px)' -%}
                            {{ block.settings.mobile_image_card_b.src | image_url: width: block.settings.mobile_image_card_b.width | image_tag: loading: "lazy", class: "object-fit-cover", sizes: img_sizes }}
                          {% else %}
                            <div class="img-placeholder h-100 w-100">
                              {{ 'collection-6' | placeholder_svg_tag: 'w-100 h-100' }}
                            </div>
                          {% endif %}
                        </picture>
                      {% endif %}
                      {% if block.settings.desktop_image_card_b != blank %}
                        <picture class="d-none d-md-block w-100 h-100">
                          {% if block.settings.desktop_image_card_b != blank %}
                            {%- assign img_sizes = '(min-width: 1968px) 960px, (min-width: 600px) 50vw, calc(100vw - 32px)' -%}
                            {{ block.settings.desktop_image_card_b.src | image_url: width: block.settings.desktop_image_card_b.width | image_tag: loading: "lazy", class: "object-fit-cover", sizes: img_sizes }}
                          {% else %}
                            <div class="img-placeholder h-100 w-100">
                              {{ 'collection-6' | placeholder_svg_tag: 'w-100 h-100' }}
                            </div>
                          {% endif %}
                        </picture>
                      {% endif %}
                    </div>
                  </div>

                  <div class="absolute-center bg-black hero-image-overlay-opacity-{{ block.id }}{{ '-card-b' }} rounded-2"></div>

                  <div class="{{ image_height }} {% if block.settings.mobile_image_card_b != blank or block.settings.desktop_image_card_b != blank %} h-100{% endif %} position-relative card-grid-text-content">
                    <div class="hero-text-shadow-overlay-{{ block.id }}{{ '-card-b' }} {{ text_color }}">
                      <div class="d-flex col-12 {{ block.settings.text_width_card_b }}">
                        {% if block.settings.icon_card_b != blank %}
                          <div class="icon_container">
                            <picture class="icon-wrapper d-flex justify-content-center align-items-center">
                              {% if block.settings.icon_card_b != blank %}
                                {%- assign img_sizes = '(min-width: 1968px) 960px, (min-width: 600px) 50vw, calc(100vw - 32px)' -%}
                                {{ block.settings.icon_card_b.src | image_url: width: block.settings.icon_card_b.width | image_tag: loading: "lazy", class: "object-fit-cover", sizes: img_sizes }}
                              {% else %}
                                <div class="img-placeholder h-100 w-100">
                                  {{ 'collection-6' | placeholder_svg_tag: 'w-100 h-100' }}
                                </div>
                              {% endif %}
                            </picture>
                          </div>
                        {% endif %}
                        <div class="text-content-wrapper">
                          {% if block.settings.overline_card_b != blank %}
                            <p class="mt-2 mb-0">
                              {{block.settings.overline_card_b}}
                            </p>
                          {% endif %}
                          {% if block.settings.heading_card_b != blank %}
                            <h3 class="mb-0">{{ block.settings.heading_card_b }}</h3>
                          {% endif %}
                          {% if block.settings.description_card_b != blank %}
                            <div class="no-last-margin richtext-with-link {{ richtext_link_style }}">
                              {{block.settings.description_card_b }}
                            </div>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                  </div>

                  {% if block.settings.link_card_b %}
                    <a {% if block.settings.link_card_b contains 'https://' %}
                      target="_blank" rel="nofollow"
                    {% endif %} href="{{ block.settings.link_card_b }}" class="stretched-link"></a>
                  {% endif %}
                </div>

              {% elsif block.type == 'onePerRow' %}
                <div class="col-12{% if section.settings.enable_swipe_on_mobile == true %} swiper-slide as-swiper-slide{% if forloop.last %} last-swiper-slide{% endif %}{% endif %}">
                  {% render 'text-shadow', id: block.id, ammount: block.settings.text_shadow_ammount %}
                  {% render 'image-overlay-opacity', id: block.id, ammount: block.settings.image_overlay_opacity %}
                  {%- liquid
                    case block.settings.text_color
                      when 'white'
                        assign text_color = 'text-white'
                      else
                        assign text_color = ''
                    endcase
                  %}
                  <div class="position-relative h-100">
                    <div class="absolute-center">
                      <div class="img-wrapper h-100 rigid-wrapper rounded-2">
                        <picture class="d-md-none d-block w-100 h-100">
                          {% if block.settings.mobile_image != blank %}
                            {%- assign img_sizes = '(min-width: 1968px) 960px, (min-width: 600px) 50vw, calc(100vw - 32px)' -%}
                            {{ block.settings.mobile_image.src | image_url: width: block.settings.mobile_image.width | image_tag: loading: "lazy", class: "object-fit-cover", sizes: img_sizes }}
                          {% else %}
                            <div class="img-placeholder h-100 w-100">
                              {{ 'collection-6' | placeholder_svg_tag: 'w-100 h-100' }}
                            </div>
                          {% endif %}
                        </picture>
                        <picture class="d-none d-md-block w-100 h-100">
                          {% if block.settings.desktop_image != blank %}
                            {%- assign img_sizes = '(min-width: 1968px) 960px, (min-width: 600px) 50vw, calc(100vw - 32px)' -%}
                            {{ block.settings.desktop_image.src | image_url: width: block.settings.desktop_image.width | image_tag: loading: "lazy", class: "object-fit-cover", sizes: img_sizes }}
                          {% else %}
                            <div class="img-placeholder h-100 w-100">
                              {{ 'collection-6' | placeholder_svg_tag: 'w-100 h-100' }}
                            </div>
                          {% endif %}
                        </picture>
                        {% if block.settings.link %}
                          <a {% if block.settings.link contains 'https://' %}
                            target="_blank" rel="nofollow"
                          {% endif %} href="{{ block.settings.link }}" class="stretched-link"></a>
                        {% endif %}
                      </div>
                    </div>

                    <div class="absolute-center bg-black hero-image-overlay-opacity-{{ block.id }} rounded-2"></div>

                    <div class="{{ image_height }} h-100 position-relative py-5 px-4 px-md-5">
                      <div class="hero-text-shadow-overlay-{{ block.id }} {{ text_color }}">
                        <div class="d-flex">
                          <div class="col-12 {{ block.settings.text_width }}">
                            {% if block.settings.overline != blank %}
                              <p class="mt-2 mb-0">
                                {{block.settings.overline}}
                              </p>
                            {% endif %}
                            {% if block.settings.heading_card != blank %}
                              <h3 class="mt-2 mb-0">{{ block.settings.heading_card }}</h3>
                            {% endif %}
                            {% if block.settings.description != blank %}
                              <div class="mt-2 no-last-margin richtext-with-link {{ richtext_link_style }}">
                                {{block.settings.description }}
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
          {% if section.settings.enable_swipe_on_mobile == true %}
            <div class="as-swiper-scrollbar swiper-scrollbar position-relative mx-auto mt-5 mt-md-6 d-md-none"></div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

</div>
<script>
    (function() {
    var $url = document.querySelector('.as-featured-grid-script')
    if (!window.featuredGrids && $url && $url.dataset.designMode !== 'yes') {
      window.featuredGrids = $url.value

      var $script = document.createElement('script')
      $script.src = window.featuredGrids
      $script.defer = "defer"
      document.body.appendChild($script)
    }
  })()
</script>



{% schema %}
  {
    "name": "Kiks Grid",
    "tag": "section",
    "class": "kiks-featured-grid featured-grid as-featured-grid",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Kiks grid"
      },
      {
          "type": "text",
          "id": "target_text",
          "label": "custom class"
        },
     {
        "type": "checkbox",
        "id": "enable_grid",
        "label": "Enable grid",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "enable_adjust_h_tag",
        "label": "Enable adjust H tag",
        "default": false
      },
      {
        "type": "color",
        "id": "background_color",
        "label": "Background color",
        "default": "transparent"
      },
      {
        "type": "select",
        "id": "adjust_h_tag_to",
        "label": "Adjust the H tag to",
        "options": [
          {
            "value": "h1",
            "label": "H1"
          },
          {
            "value": "h2",
            "label": "H2"
          },
          {
            "value": "h3",
            "label": "H3"
          },
          {
            "value": "h4",
            "label": "H4"
          },
          {
            "value": "h5",
            "label": "H5"
          },
          {
            "value": "h6",
            "label": "H6"
          }
        ],
        "default":   "h3"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text"
      },
      {
        "type": "select",
        "id": "heading_alignment",
        "label": "Heading alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ],
        "default": "center"
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          },
          {
            "value": "transparent",
            "label": "Transparent"
          }
        ],
        "default": "white"
      },
      {
        "type": "select",
        "id": "text_width",
        "label": "Desktop text width",
        "options": [
          {
            "value": "col-md-8",
            "label": "2/3"
          },
          {
            "value": "col-md-6",
            "label": "1/2"
          },
          {
            "value": "col-md-4",
            "label": "1/3"
          },
          {
            "value": "col-md-12",
            "label": "Full width"
          }
        ],
        "default": "col-md-6"
      },
      {
        "type": "select",
        "id": "header_color",
        "label": "Header color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "image_height",
        "label": "Image height",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          },
          {
            "value": "none",
            "label": "None"
          }
        ],
        "default": "medium"
      },
      {
        "type": "select",
        "id": "button_position",
        "label": "Button position",
        "options": [
          {
            "value": "top",
            "label": "Top"
          },
          {
            "value": "bottom",
            "label": "Bottom"
          }
        ],
        "default": "bottom"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      },
      {
        "type": "select",
        "id": "button_style",
        "label": "Button style",
        "options": [
          {
            "value": "solid",
            "label": "Solid"
          },
          {
            "value": "outline",
            "label": "Outline"
          },
          {
            "value": "link",
            "label": "Link"
          }
        ], 
        "default": "link"
      },
     {
       "type": "checkbox",
       "id": "enable_swipe_on_mobile",
       "label": "Enable swipe on mobile",
       "default": true
     },
     {
      "type": "header",
      "content": "Kikstart Spacing Settings"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Padding top",
      "default": 64
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 64
    },
    {
      "type": "range",
      "id": "padding_top_mob",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "For Mobile Padding top",
      "default": 48
    },
    {
      "type": "range",
      "id": "padding_bottom_mob",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "For Mobile Padding Bottom",
      "default": 48
    }
    ],
    "blocks": [
      {
        "type": "twoPerRow",
        "name": "Two per row",
        "settings": [
          {
            "type": "select",
            "id": "desktop_layout",
            "label": "Desktop layout",
            "options": [
              {
                "value": "half_width_block",
                "label": "Half width block"
              },
              {
                "value": "left_large_block",
                "label": "Left large block"
              },
              {
                "value": "right_large_block",
                "label": "Right large block"
              },
              {
                "value": "left_right_eqqual",
                "label": "Left and right equal block"
              }
            ],
            "default": "left_large_block"
          },
          {
            "type": "header",
            "content": "CARD A"
          },
          {
            "type": "image_picker",
            "id": "desktop_image_card_a",
            "label": "Desktop image"
          },
          {
              "type": "image_picker",
              "id": "mobile_image_card_a",
              "label": "Mobile image"
          },
          {
            "type": "range",
            "id": "image_overlay_opacity_card_a",
            "min": 0,
            "max": 100,
            "step": 20,
            "default": 0,
            "unit": "%",
            "label": "Image overlay opacity"
          },
          {
            "type": "text",
            "id": "overline_card_a",
            "label": "Overline"
          },
           {
              "type": "image_picker",
              "id": "icon_card_a",
              "label": "Icon (optional)",
              "info": "This icon will be displayed left of the text. It is recommended to use a square image with a size of 32x32px."
          },
          {
            "type": "text",
            "id": "heading_card_a",
            "default": "Heading",
            "label": "Heading"
          },
          {
            "type": "richtext",
            "id": "description_card_a",
            "label": "Description"
          },
          {
            "type": "select",
            "id": "text_width_card_a",
            "label": "Desktop text width",
            "options": [
              {
                "value": "col-lg-12",
                "label": "Full width"
              },
              {
                "value": "col-lg-8",
                "label": "2/3"
              },
              {
                "value": "col-lg-6",
                "label": "1/2"
              }
            ],
            "default": "col-lg-12"
          },
          {
            "type": "select",
            "id": "text_color_card_a",
            "label": "Text color",
            "options": [
              {
                "value": "white",
                 "label": "White"
              },
              {
                "value": "black",
                "label": "Black"
              }
            ],
            "default": "black"
          },
          {
            "type": "range",
            "id": "text_shadow_ammount_card_a",
            "min": 0,
            "max": 100,
            "step": 10,
            "default": 0,
            "unit": "%",
            "label": "Text shadow ammount"
          },
          {
            "type": "url",
            "id": "link_card_a",
            "label": "Link"
          },
          {
            "type": "header",
            "content": "CARD B"
          },
          {
            "type": "image_picker",
            "id": "desktop_image_card_b",
            "label": "Desktop image"
          },
          {
            "type": "image_picker",
            "id": "mobile_image_card_b",
            "label": "Mobile image"
          },
          {
            "type": "range",
            "id": "image_overlay_opacity_card_b",
            "min": 0,
            "max": 100,
            "step": 20,
            "default": 0,
            "unit": "%",
            "label": "Image overlay opacity"
          },
          {
            "type": "text",
            "id": "overline_card_b",
            "label": "Overline"
          },
          {
              "type": "image_picker",
              "id": "icon_card_b",
              "label": "Icon (optional)",
              "info": "This icon will be displayed left of the text. It is recommended to use a square image with a size of 32x32px."
          },
          {
            "type": "text",
            "id": "heading_card_b",
            "default": "Heading",
            "label": "Heading"
          },
          {
            "type": "richtext",
            "id": "description_card_b",
            "label": "Description"
          },
          {
            "type": "select",
            "id": "text_width_card_b",
            "label": "Desktop text width",
            "options": [
              {
                "value": "col-lg-12",
                "label": "Full width"
              },
              {
                "value": "col-lg-8",
                "label": "2/3"
              },
              {
                "value": "col-lg-6",
                "label": "1/2"
              }
            ],
            "default": "col-lg-12"
          },
          {
            "type": "select",
            "id": "text_color_card_b",
            "label": "Text color",
            "options": [
              {
                "value": "white",
                 "label": "White"
              },
              {
                "value": "black",
                "label": "Black"
              }
            ],
            "default": "black"
          },
          {
            "type": "range",
            "id": "text_shadow_ammount_card_b",
            "min": 0,
            "max": 100,
            "step": 10,
            "default": 0,
            "unit": "%",
            "label": "Text shadow ammount"
          },
          {
            "type": "url",
            "id": "link_card_b",
            "label": "Link"
          }
        ]
      },
      {
        "type": "onePerRow",
        "name": "One per row",
        "settings": [
          {
            "type": "header",
            "content": "CARD"
          },
          {
            "type": "image_picker",
            "id": "desktop_image",
            "label": "Desktop image"
          },
          {
              "type": "image_picker",
              "id": "mobile_image",
              "label": "Mobile image"
          },
          {
            "type": "range",
            "id": "image_overlay_opacity",
            "min": 0,
            "max": 100,
            "step": 20,
            "default": 0,
            "unit": "%",
            "label": "Image overlay opacity"
          },
          {
            "type": "text",
            "id": "overline",
            "label": "Overline"
          },
          {
            "type": "text",
            "id": "heading_card",
            "default": "Heading",
            "label": "Heading"
          },
          {
            "type": "richtext",
            "id": "description",
            "label": "Description"
          },
          {
            "type": "select",
            "id": "text_width",
            "label": "Desktop text width",
            "options": [
              {
                "value": "col-lg-12",
                "label": "Full width"
              },
              {
                "value": "col-lg-8",
                "label": "2/3"
              },
              {
                "value": "col-lg-6",
                "label": "1/2"
              }
            ],
            "default": "col-lg-12"
          },
          {
            "type": "select",
            "id": "text_color",
            "label": "Text color",
            "options": [
              {
                "value": "white",
                 "label": "White"
              },
              {
                "value": "black",
                "label": "Black"
              }
            ],
            "default": "black"
          },
          {
            "type": "range",
            "id": "text_shadow_ammount",
            "min": 0,
            "max": 100,
            "step": 10,
            "default": 0,
            "unit": "%",
            "label": "Text shadow ammount"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Kiks Grid",
        "blocks": [
          {
            "type": "twoPerRow"
          },
          {
            "type": "twoPerRow"
          }
        ] 
      }
    ]
  }
{% endschema %}